<template>
	<!-- 最外层的容器 -->
	<!-- 最外层的容器 -->
	<view class="my-settle-container" v-if="orderList.length">
		<!-- 全选区域 -->
		<label class="radio" v-if="!hideOrderRadio">
			<radio color="#C00000" :checked="isChecked" @click="radioChangeHandler" /><text>全选</text>
		</label>

		<!-- 合计区域 -->
		<view class="amount-box">
			合计:<text class="amount">￥{{totalPrice}}</text>
		</view>
		<view class="btn-settle-order" v-if="showOrderSettleBtn" @click="toPay()">去结算</view>
		<view class="btn-settle" @click="toSettle(totalPrice)" v-else>去结算</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			remarktext: {
				type: String,
				default: ''
			},
			totalPrice: {
				type: Number,
				default: 0
			},
			showOrderSettleBtn: {
				type: Boolean,
				default: false
			},
			hideOrderRadio: {
				type: Boolean,
				default: false
			},
			orderList: {
				type: Array,
				default: []
			},
			// 折扣红包
			discountNum: {
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				isChecked: false
			}
		},
		onLoad(option) {},
		onShow() {},
		methods: {
			// 是否全选
			radioChangeHandler() {
				this.isChecked = !this.isChecked
				// 如果全选了，就算订单总金额
			},
			// 去结算页面
			toSettle() {
				uni.navigateTo({
					url: '/subpkg/cart-order/cart-order'
				})
			},
			// 去收银台
			async toPay() {
					// 需要选择了地址才允许去收银台，否则提示选择地址
					if (this.address.province) {
						let orderJson = []
						this.orderList.forEach(item => {
							let obj = {}
							obj.productId = item.productId,
								obj.num = item.num
							// console.log(obj)
							orderJson.push(obj)
						})
						this.orderJson = orderJson
						var that = this
						const {
							data: res
						} = await uni.$http.post('/cart/submitOrder', {
							"userId": this.userInfo._id,
							"orderJson": JSON.stringify(this.orderJson),
							"hb": this.discountNum,
							"province": this.address.province,
							"city": this.address.city,
							"area": this.address.area,
							"address": this.address.address,
							"contact": this.address.contact,
							"phone": this.address.phone,
							"memo": that.remarktext
						})
						
						// 生成订单号
						this.orderNum = res.data
						
						if (res.success == 0) {
							console.log(res,'res')
							uni.navigateTo({
								url: '/subpkg/cashier-desk/cashier-desk?orderNum=' + this.orderNum +
									'&totalPrice=' +
									this.totalPrice
							})
							// 需要将生成订单的商品 从购物车移除
							this.orderList.forEach(item => {
								uni.$http.post('/cart/removeCart', {
									id: item._id,
									userId:this.userInfo._id
								})
							})
						
						}else {
							console.log(res)
							this.$emit('sendMsg',res.msg)
						}
						
					} else {
						uni.$showMsg('请选择地址后再提交订单!')
					}
				
			}
		},
		computed: {
			...mapState('m_user', ['userInfo', 'address'])
		}
	}
</script>

<style lang="scss">
	.my-settle-container {
		position: relative;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0px -2rpx 8rpx 1rpx rgba(0, 0, 0, 0.03);
		display: flex;
		align-items: center;
		padding-left: 24rpx;
		padding-right: 24rpx;
		font-size: 28rpx;
		color: #666666;
		z-index: 999;

		.radio {
			display: flex;
			align-items: center;
		}

		.amount {
			font-size: 30rpx;
			font-weight: bold;
			color: #FF1111;
		}

		.amount-box {
			position: absolute;
			right: 340rpx;
		}

		.btn-settle {
			position: absolute;
			right: 80rpx;
			width: 200rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #FFFFFF;
			background: #D80E0E;
			border-radius: 39rpx;
		}

		.btn-settle-order {
			position: absolute;
			right: 80rpx;
			width: 200rpx;
			height: 78rpx;
			line-height: 78rpx;
			background: #D80E0E;
			border-radius: 8rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #FFFFFF;
			background: #D80E0E;
		}
	}

	.radio {
		width: 260rpx;
	}
</style>
